<template>
  <div :class="$style.DeFiCompPage">
    <div :class="$style.leftBlock">
      <div :class="$style.leftTitle">DeFi</div>
      <div :class="$style.leftSub">即享挖矿奖励，随存随取，灵活操作</div>
      <div :class="$style.tabBox">
        <div :class="[$style.tabItem, tabIndex == 0 ? $style.tabActive : '']" @click="changeTab(0)">独资</div>
        <div :class="[$style.tabItem, tabIndex == 1 ? $style.tabActive : '']" @click="changeTab(1)">共享</div>
        <div :class="[$style.tabItem, tabIndex == 2 ? $style.tabActive : '']" @click="changeTab(2)">我的矿机</div>
      </div>
      <div :class="$style.leftUl">
        <div :class="$style.leftLi" v-for="(item, index) in oreList" :key="index">
          <img :class="$style.liIcon" :src="item.icon" alt="">
          <div :class="$style.liInfo">
            <div :class="$style.liInfoItem">
              <div :class="$style.liInfoText">
                <span :class="$style.liInfoSpan1">购买时间：</span>
                <span :class="$style.liInfoSpan2">2023-12-28 00:00:00</span>
              </div>
              <div :class="$style.liInfoText">
                <span :class="$style.liInfoSpan1">产出币种：</span>
                <span :class="$style.liInfoSpan2">USDT</span>
              </div>
              <div :class="$style.liInfoText">
                <span :class="$style.liInfoSpan1">矿机类型：</span>
                <span :class="$style.liInfoSpan2">独资机型</span>
              </div>
              <div :class="$style.liInfoText">
                <span :class="$style.liInfoSpan1">收益类型：</span>
                <span :class="$style.liInfoSpan2">按产值</span>
              </div>
              <div :class="$style.liInfoText">
                <span :class="$style.liInfoSpan1">收益方式：</span>
                <span :class="$style.liInfoSpan2">自动收益</span>
              </div>
              <div :class="$style.liInfoText">
                <span :class="$style.liInfoSpan1">份额占比：</span>
                <span :class="$style.liInfoSpan2">0.00%</span>
              </div>
            </div>
            <div :class="$style.liInfoItem">
              <div :class="$style.liInfoText">
                <span :class="$style.liInfoSpan1">矿机详情</span>
              </div>
              <div :class="$style.liInfoText">
                <span :class="$style.liInfoSpan1">收益次数：</span>
                <span :class="$style.liInfoSpan2">30次</span>
              </div>
              <div :class="$style.liInfoText">
                <span :class="$style.liInfoSpan1">产品说明： 按产值：</span>
                <span :class="$style.liInfoSpan2">19.389216USDT</span>
              </div>
              <div :class="$style.liInfoBtn">正常</div>
            </div>
          </div>
          <div :class="$style.liBtn">
            <div :class="$style.liBtnInner">
              <div :class="$style.liBtnText">收益账单</div>
              <img :class="$style.liBtnIcon" src="/jiantouyoulv.png" alt="">
            </div>
          </div>
        </div>
      </div>
    </div>
    <div :class="$style.rightBlock">
      <div :class="$style.rightTitle">矿机收益记录</div>
      <div :class="$style.rightTable">
        <lay-table height="100%" :columns="columnList" :data-source="dataList">
        </lay-table>
      </div>
    </div>
  </div>
</template>
<script>
import { defineComponent } from "vue";
export default defineComponent({
  name: "DeFiComp",
  data() {
    return {
      tabIndex: 0,
      oreList: [
        { icon: '/kuangji.png' },
        { icon: '/kuangji.png' },
        { icon: '/kuangji.png' },
        { icon: '/kuangji.png' },
        { icon: '/kuangji.png' },
        { icon: '/kuangji.png' },
        { icon: '/kuangji.png' },
        { icon: '/kuangji.png' },
      ],
      dataList:[
        // {name1:'11',name2:'22',name3:'33',name4:'44',name5:'55'},
      ],
      columnList:[        
        { title:'矿机名称', width: '', key:'name1' },
        { title:'收益币种', width: '', key:'name2' },
        { title:'收益金额', width: '', key:'name3' },
        { title:'收益日期', width: '', key:'name4' },
        { title:'释放状态', width: '', key:'name5' },
      ]
    };
  },
  methods: {
    changeTab(index) {
      this.tabIndex = index;
    },
    getProfitlist(){
      let that=this;
      let loadIndex = that.$layer.load();
      that.$axios.post('/api/Orepool/profitlist', {}).then((res) => {
        that.$layer.close(loadIndex);
        if (res.data.code != 200) {
          that.$layer.msg(res.data.message, { time: 1000 });
          return;
        }
        
      }).catch((err) => {
        that.$layer.close(loadIndex);
        that.$layer.msg('矿机收益列表获取失败,请重试', { time: 1000 });
      });
    },
    getOreList(){
      let that=this;
      let loadIndex = that.$layer.load();
      that.$axios.post('/api/Orepool/list', {}).then((res) => {
        that.$layer.close(loadIndex);
        if (res.data.code != 200) {
          that.$layer.msg(res.data.message, { time: 1000 });
          return;
        }
      }).catch((err) => {
        that.$layer.close(loadIndex);
        that.$layer.msg('矿机列表获取失败,请重试', { time: 1000 });
      });
    },
  },
});
</script>
<style module>
.DeFiCompPage {
  width: 100%;
  height: 100%;
  display: flex;
}

.leftBlock {
  width: calc(55% - 5px);
  height: 100%;
  min-width: 858px;
  background-color: #FFFFFF;
  box-sizing: border-box;
  padding: 20px;
  overflow-x: hidden;
}

.leftTitle {
  width: 100%;
  font-family: Arial;
  font-size: 30px;
  font-weight: normal;
  color: #000000;
  margin-bottom: 9px;
}

.leftSub {
  width: 100%;
  font-family: Arial;
  font-size: 20px;
  font-weight: normal;
  color: #515A6E;
  margin-bottom: 25px;
}

.tabBox {
  width: 100%;
  height: 40px;
  background: #F0F2F5;
  border-radius: 3px;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  padding: 5px;
  margin-bottom: 20px;
}

.tabItem {
  width: 50%;
  height: 100%;
  text-align: center;
  line-height: 30px;
  font-family: Source Han Sans;
  font-size: 14px;
  font-weight: 300;
  color: #515A6E;
  cursor: pointer;
}

.tabActive {
  background-color: #FFFFFF;
  border-radius: 3px;
  color: #1890FF;
}

.leftUl {
  width: 100%;
  height: calc(100% - 154px);
  overflow-x: auto;
  overflow-y: auto;
}

.leftLi {
  width: 100%;
  background-color: #FCFCFC;
  box-sizing: border-box;
  border: 1px solid #EBEEF4;
  border-radius: 6px;
  padding: 30px 30px 30px 0;
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}

.liIcon {
  width: 160px;
  height: 160px;
}

.liInfo {
  width: calc(100% - 160px - 20px - 20px - 105px);
  display: flex;
  justify-content: space-between;
  margin-left: 20px;
  margin-right: 20px;
}
.liInfoItem:first-child {
  margin-right: 15px;
}

.liInfoText {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}

.liInfoSpan1 {
  font-family: Source Han Sans;
  font-weight: 300;
  font-size: 14px;
  color: #515A6E;
}

.liInfoSpan2 {
  font-family: Source Han Sans;
  font-size: 14px;
  font-weight: 500;
  color: #515A6E;
}

.liInfoBtn {
  width: 52px;
  height: 28px;
  text-align: center;
  line-height: 28px;
  border-radius: 2px;
  background-color: #13CE66;
  font-family: Arial;
  font-size: 14px;
  font-weight: normal;
  color: #FFFFFF;
}

.liBtn {
  width: 105px;
  height: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.liBtnInner {
  display: flex;
  align-items: center;
  cursor: pointer;
}

.liBtnText {
  font-family: Source Han Sans;
  font-size: 20px;
  font-weight: 500;
  color: #13CE66;
  white-space: nowrap;
}

.liBtnIcon {
  width: 16px;
  height: 16px;
  margin-left: 9px;
}

.rightBlock {
  width: 45%;
  height: 100%;
  min-width: 590px;
  background-color: #FFFFFF;
  box-sizing: border-box;
  padding: 0 20px;
  margin-left: 5px;
}

.rightTitle{
  width: 100%;
  height: 60px;
  line-height: 60px;
  font-family: Source Han Sans;
  font-size: 20px;
  font-weight: 500;
}

.rightTablle{
  width: 100%;
  height: calc(100% - 60px);
}
</style>